I'm confused about the use case of Phaser.Display.Align.In.Center, the following code is adapted from an official example
class Example extends Phaser.Scene
{
constructor ()
{
super();
}
preload() {
this.load.path = 'https://raw.githubusercontent.com/photonstorm/phaser3-examples/master/public/assets/';
this.load.image('pic', 'pics/barbarian-loading.png');
}
create ()
{
const pic = this.add.image(400, 300, 'pic');
//Phaser.Display.Align.In.Center(pic, this.add.zone(400, 300, 800, 600));
}
}
var config = {
width: 800,
height: 600,
backgroundColor: '#666', //0xf3f3f3
scene: [Example]
}
var game = new Phaser.Game(config);<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>where I've commented this line out
//Phaser.Display.Align.In.Center(pic, this.add.zone(400, 300, 800, 600));
No matter if I use this line, I get the exactly same result, a centered image.
Considering we already have setOrigin, what is "Phaser.Display.Align.In.Center" used for?
The Phaser.Display.Align is used for positioning objects relative to another objects. setOrigin is just used to define from where the coordinats of the object should be calculated.
In this example you can see how you can position an object relative to another (with Phaser.Display.Align), but without knowing/setting the coordinates for it.
It is good/used for, positioning to images on top/next of eachother like clothes, guns, text on items, ...
On each click, the green rectangle will be repositioned, with Phaser.Display.Align.
(I'm using both Phaser.Display.Align.In and Phaser.Display.Align.To to illustrate the difference ).
function create () {
this.add.text(10,10, 'Click red Cube', '#ffffff')
rect1 = this.add.rectangle(200, 100, 50, 50, 0xff0000);
rect2 = this.add.rectangle(-50, -50, 30, 30, 0x00ff00);
Phaser.Display.Align.To.TopCenter(rect2, rect1);
rect1.setInteractive();
rect1.on('pointerdown', alignObject)
}
function alignObject(){
switch(alignObjPoistion){
case 0:
Phaser.Display.Align.In.TopCenter(rect2, rect1);
break;
case 1:
Phaser.Display.Align.In.Center(rect2, rect1);
break;
case 2:
Phaser.Display.Align.In.BottomCenter(rect2, rect1);
break;
case 3:
Phaser.Display.Align.To.BottomCenter(rect2, rect1);
break;
case 4:
Phaser.Display.Align.To.TopCenter(rect2, rect1);
alignObjPoistion = -1;
}
alignObjPoistion++;
}
var alignObjPoistion = 0;
var rect1;
var rect2;
var config = {
width: 400,
height: 200,
scene: { create }
}
var game = new Phaser.Game(config);<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>